<template>
<view class="page_ztc" >
	<view class="top_div">
		<image class="top_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/bank/ae4ad01c3b3628b8ae628ab8fb2fda3.png" mode=""></image>
		<view class="top_xx flex flex_sb flex_ac flex_c">
			<view class="xx_item" @click="toPage('companyCp')">
				<view class="xx_num">3000+</view>
				<view class="xx_name">企业产品</view>
			</view>
			<view class="line"></view>
			<view class="xx_item" @click="toPage('companyFw')">
				<view class="xx_num">7000+</view>
				<view class="xx_name">企业服务</view>
			</view>
			<view class="line"></view>
			<view class="xx_item" @click="toPage('jinrongList')">
				<view class="xx_num">200+</view>
				<view class="xx_name">金融产品</view>
			</view>
		</view>
	</view>
	
	<!-- 最新资讯 -->
	<view class="zx_div">
		<image class="zx_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/bank/4565475678.png" mode="heightFix"></image>
		<view class="news">
			<view class="news_item"  :class="[animate?'anim':'']" :style="'top:'+item.top||'0px'" v-for="(item,index) in newsList" :key='index'>{{item.title}}</view>
		</view>
	</view>
	
	<view class="btn_div">
<!-- 		<view class="btn_item" v-for="(item,index) in typeList1" :key="index" @click="toList(item,1)">
			<image :src='item.img' mode=""></image>
			<view class="">{{item.name}}</view>
		</view> -->
		<view class="btn_item" v-for="(item,index) in typeList2" :key="index" @click="toList(item,2)">
			<image :src='item.img' mode=""></image>
			<view class="">{{item.name}}</view>
		</view>
	</view>
	
	<image @click="toPage('jinrongList')" class="mian_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/image/654765896786.png" mode="widthFix"></image>
	
	<view class="fw_title">金融产品</view>
	<listPageJr :list='list.slice(0,5)' @getMore='()=>{}'></listPageJr>
</view>
</template>

<script>
	import listPageJr from '@/components/listPageJr'
	import img1 from '~@/static/image/ztc.png'
	let time = null
	import {jinrong}  from '@/utils/api.js'
	export default {
		data() {
			return {
				swiperImg:[{img:img1}],
				list:[],
				newsList:[
					{title:'福建邦信信息科技有限公司成功对接商标注册服务'},
					{title:'福建邦信信息科技有限公司成功对接商标注册服务'},
					{title:'福建邦信信息科技有限公司成功对接商标注册服务'},
					{title:'福建邦信信息科技有限公司成功对接商标注册服务'},
					{title:'福建邦信信息科技有限公司成功对接商标注册服务'},
				],
				animate:true,
				typeList1:[],
				typeList2:[],
			}
		},
		components:{
			listPageJr
		},
		created(){
				// jinrong.getServiceProductType({role_id:uni.getStorageSync('role_id')}).then(res=>{
				// 	this.typeList1.push(...res.data.slice(0,4))
				// })
				jinrong.getServiceType({role_id:uni.getStorageSync('role_id')}).then(res=>{
					this.typeList2.push(...res.data.slice(0,8))
				})
				jinrong.getFinanceProductList({role_id:uni.getStorageSync('role_id'),...this.query}).then(res=>{
					this.list = res.data.data
				})
		},
		mounted(){
			this.dong()
		},
		methods: {
			toPage(url){
				uni.navigateTo({
					url: `/pages/${url}/${url}`
				})
			},
			toList(item,index){
				if(index==2){
					uni.navigateTo({
						url: `/pages/companyFw/companyFw?id=${item.id}`
					})
				}else{
					uni.navigateTo({
						url: `/pages/companyCp/companyCp?id=${item.id}`
					})
				}
			},
			dong(){
				if(!this.newsList){
					return
				}
				if(time){
					clearInterval(time)
				}
				time = setInterval(()=>{
					this.newsList.forEach(item => {
						item.top='-20px';
					});
					this.animate=!this.animate
					setTimeout(()=>{
						this.newsList.push(this.newsList[0]);
						this.newsList.shift();
						this.newsList.forEach(item => {
							item.top='0px';
						});
						this.animate=!this.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
					},500)
				},3000)
			}
		}
	}
</script>

<style scoped lang="scss">
.top_div{
	width: 100%;
	height: 200px;
	.top_img{
		width: 100%;
		height: 160px;
	}
	.top_xx{
		position: relative;
		height: 52px;
		top: -30px;
		border-radius: 4px;
		width: calc(100% - 30px);
		left: 15px;
		background-color: #fff;
		text-align: center;
		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
		.xx_item{
			width: 32%;
			.xx_num{
				color: #00aaff;
				font-size: 15px;
				margin-bottom: 2px;
			}
			.xx_name{
				color: #666;
				font-size: 12px;
			}
		}
		.line{
			height: 20px;
			width: 1px;
			background-color: #ddd;
		}
	}
}
	
.zx_div{
	margin: 14px 15px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 10px 0px rgba(0, 145, 255, 0.05);
	position: relative;
	.zx_left{
		width: 80px;
		height: 20px;
		position: absolute;
		left: 0;
		top: 0;
		font-size: 15px;
		line-height: 20px;
		color: #333;
	}
	.news{
		height: 20px;
		width: calc(100% - 80px);
		overflow: hidden;
		position: relative;
		left: 80px;
	}
	.news_item{
		font-size: 13px;
		height: 20px;
		color: #666;
		line-height: 20px;
		width: 100%;
		position: relative;
		
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 3;
		// overflow: hidden;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
.anim{
	transition: all 0.5s;
}	


.btn_div{
	// width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 15px;
	.btn_item{
		width: calc(25% - 5px);
		margin-bottom: 0px;
		border-radius: 8px;
		text-align: center;
		padding: 10px 0;
		color: #666;
		font-size: 14px;
		image{
			width: 36px;
			height: 36px;
			margin-bottom: 2px;
		}
	}
}


.page_ztc{
}

.fw_title{
	font-size: 18px;
	font-weight: 500;
	padding: 0px 15px;
}
.fw_item{
	margin: 0px 15px;
	padding: 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 1px 10px 0px rgba(10, 71, 117, 0.1);
	margin-top: 12px;
	display: flex;
	overflow: hidden;
	position: relative;
	&::after{
		position: absolute;
		content: ' ';
		width: 14px;
		height: 14px;
		border-top: 1px solid #666;
		border-right: 1px solid #666;
		transform: rotate(45deg);
		
		right: 20px;
		top: 40px;
	}
	.fw_image{
		width: 110px;
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		margin-right: 12px;
		.fw_img_text{
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			padding: 4px 6px;
			color: #fff;
			background: rgba(0, 145, 255, 0.8);
		}
	}
	.fw_content{
		.fw_name{
			font-size: 15px;
		}
		.fw_text{
			font-size: 14px;
			color: #888;
			margin-top: 8px;
		}
	}
}

.mian_img{
	width: calc(100% - 30px);
	margin:  0 15px 15px;
}
</style>
